<markup>
<div data-view-container>
	<section data-view-id="page1" data-view="true" data-view-default="true">
		<header>视图1</header>
		<h1>视图1含有footer.</h1>
		<div
				data-view-rel="page2"
				data-view-rel-type = "nav"
				data-view-rel-namespace = "my-namespace"
				class="btn">进入视图2</div>
	</section>
	<section data-view-id="page2" data-view-namespace = "my-namespace" data-view="true">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			视图2
		</header>
		<h1>视图2含有footer.</h1>
		<div
				data-view-rel="page3"
				data-view-rel-type = "nav"
				data-view-rel-namespace = "my-namespace"
				class="btn">进入视图3</div>
	</section>
	<section data-view-id="page3" data-view-namespace = "my-namespace" data-view="true">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			视图3
		</header>
		<h1>视图3没有footer.</h1>
	</section>
</div>
<footer>
	<span data-id = "page1"
	      data-view-rel="page1"
	      data-view-rel-type = "nav"
	>视图1</span>
	<span data-id = "page2"
	      data-view-rel="page2"
	      data-view-rel-type = "nav"
	      data-view-rel-namespace = "my-namespace"
	>视图2</span>
</footer>
</markup>
<link rel = "stylesheet" href = "demo/css/common.css"/>
<link rel = "stylesheet" href = "demo/css/view.switch-animation.01.css"/>
<style>
footer{
	height: 44px;
	line-height: 44px;
}
footer:after{
	content: "";
	display: block;
	clear: both;
}
footer span{
	float: left;
	display: block;
	width: 50%;
	text-align: center;
}
footer span.active{
	font-weight: bold;
}
</style>
<script>
/* 监听事件，控制公用 footer 的显示与隐藏 */
var footerObj = document.querySelector("footer");

var ifShowFooter = false;

/**
 * 执行布局
 */
var layout = function(){
	var height = View.layout.getBrowserHeight();

	var footerHeight = 44;
	var containerObj = View.getViewContainerDomElement();
	containerObj.style.height = (height - (ifShowFooter? footerHeight: 0)) + "px";/* 高度上预留footer空间 */
};

View.beforeInit(function(){
	/**
	 * 布局的初始化动作需要在视图初始化之前完成
	 */
	View.layout.init({
		autoReLayoutWhenResize: true,/* 浏览窗口尺寸发生变化时是否自动重新布局 */

		layoutAsMobilePortrait: layout,
		layoutAsMobileLandscape: layout,
		layoutAsTabletPortrait: layout,
		layoutAsTabletLandscape: layout,
		layoutAsPcPortrait: layout,
		layoutAsPcLandscape: layout
	});
});

/* 视图切换时自动选中对应的底部导航入口 */
View.on("change", function(e){
	var tarViewId = e.data.targetView.id;

	/* 呈现footer的视图 */
	var viewIdsShowingFooter = ["page1", "page2"];

	var isFooterCurrentlyVisible = util.hasClass(footerObj, "visible");
	var shouldFooterBeVisible = viewIdsShowingFooter.indexOf(tarViewId) !== -1;

	ifShowFooter = shouldFooterBeVisible;

	/* 判断footer的可见性是否发生变化 */
	var ifFooterVisibilityChanges = true;
	if(isFooterCurrentlyVisible && shouldFooterBeVisible || !isFooterCurrentlyVisible && !shouldFooterBeVisible)
		ifFooterVisibilityChanges = false;

	/* 发生变化时需要重新布局 */
	if(ifFooterVisibilityChanges){
		util[shouldFooterBeVisible? "addClass": "removeClass"](footerObj, "visible");
		layout(View.layout.getBrowserWidth(), View.layout.getBrowserHeight());
	}

	/* 高亮状态切换 */
	var activeObj = View.find(footerObj, ".active");
	activeObj && util.removeClass(activeObj, "active");

	var obj = View.find(footerObj, "span[data-id=" + tarViewId + "]");
	obj && util.addClass(obj, "active");
});
</script>
<script class = "append">
/* 添加切换动画 */
var timer;

/**
 * 动画持续时长，需要与css中定义的动画时长一致
 * @type {number}
 */
var animationDuration = 600;

/**
 * 清除给定DOM元素上声明的动画样式
 * @param {HTMLElement} obj
 */
var clear = function(obj){
	if(!obj)
		return;

	"hideToLeft, showFromRight, hideToRight, showFromLeft".split(/\s*,\s*/).forEach(function(className){
		util.removeClass(obj, className);
	});
};

/**
 * param {Object} meta 切换操作的元数据描述
 * @param {HTMLElement} meta.srcElement 视图切换时，要离开的当前视图对应的DOM元素。可能为null
 * @param {HTMLElement} meta.tarElement 视图切换时，要进入的目标视图对应的DOM元素
 * @param {String} meta.type 视图切换方式
 * @param {Function} meta.render 渲染句柄
 */
View.setSwitchAnimation(function(meta){
	var srcElement = meta.srcElement,
		tarElement = meta.targetElement,
		type = meta.type,
		trigger = meta.trigger,
		render = meta.render;

	/**
	 * 动画播放前清除可能存在的动画样式
	 */
	clear(srcElement);
	clear(tarElement);

	/**
	 * 调用View.js传递而来的渲染句柄，完成活动视图的切换，包括：
	 * 1. 视图参数的传递
	 * 2. 活动视图样式类的切换
	 * 3. leave，ready、enter等事件的触发
	 */
	render();

	var isNav = type === View.SWITCHTYPE_VIEWNAV,
		isChange = type === View.SWITCHTYPE_VIEWCHANGE,
		isHistoryBack = type === View.SWITCHTYPE_HISTORYBACK,
		isHistoryForward = type === View.SWITCHTYPE_HISTORYFORWARD;

	/**
	 * 视图切换动作是“替换堆栈”的方式，或浏览器不支持对history的操作
	 */
	if(!View.checkIfBrowserHistorySupportsPushPopAction() || isChange){
		util.addClass(srcElement, "fadeOut");
		util.addClass(tarElement, "fadeIn");
	}else if(isHistoryForward || isNav){
		/**
		 * 视图切换动作是“压入堆栈”的方式（浏览器前进，或代码触发）
		 */

		util.addClass(srcElement, "hideToLeft");
		util.addClass(tarElement, "showFromRight");
	}else{
		/**
		 * 视图切换动作是“弹出堆栈”的方式（浏览器后退）
		 */

		util.addClass(srcElement, "hideToRight");
		util.addClass(tarElement, "showFromLeft");
	}

	/**
	 * 动画播放完成后清除动画样式
	 */
	clearTimeout(timer);
	timer = setTimeout(function(){
		clear(srcElement);
		clear(tarElement);
	}, animationDuration);
});
</script>
<script class = "ctrl">
{
	/* 是否要求 View.js 完成初始化 */
	requireViewjsInitialized: false
}
</script>